<template>
    <a-modal :width="600"
             :title="title"
             destroyOnClose
             @close="close"
             :maskClosable="false"
             v-model="visible">
        <div style="max-height: 420px;overflow-y: scroll;">
            <a-form-model
                    ref="ruleForm"
                    small
                    :model="form"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
                <a-form-model-item label="产品名称" prop="productId">
                    <p-remote-select
                            style="width: 100%"
                            :placeholder="'请选择产品'"
                            ref="productSelect"
                            :dataFun="productFn"
                            v-model="form.productId"
                            @afterLoad="afterLoad"
                            @change="selProduct"
                            lableKey="groupName"
                            valueKey="id">
                    </p-remote-select>
                </a-form-model-item>
                <a-form-model-item label="入库数量" prop="intoCount">
                    <a-input-number
                            class="width-percent-100"
                            placeholder="请输入入库数量"
                            :precision="0"
                            :min="1"
                            allowClear
                            v-model="form.intoCount" />
                </a-form-model-item>
                <a-form-model-item label="入库价格" prop="intoPrice">
                    <a-input-number
                            class="width-percent-100"
                            placeholder="请输入入库价格"
                            :precision="2"
                            allowClear
                            v-model="form.intoPrice" />
                </a-form-model-item>
                <a-form-model-item label="属性" prop="remark">
                    <div class="clearfix" v-for="(item,index) in productAttrArr" :key="index">
                        <div class="pull-left width-180">
                            <p-remote-select
                                    style="width: 100%"
                                    :placeholder="'请选择属性'"
                                    ref="productAttrSelect"
                                    :dataFun="productAttrFn"
                                    v-model="item.productAttrId"
                                    lableKey="propertyName"
                                    @afterLoad="afterLoadAttrList"
                                    @change="selProductAttr"
                                    :idx="index"
                                    valueKey="id">
                            </p-remote-select>
                        </div>
                        <div class="pull-left width-180 ml-15">
                            <a-select
                                    style="width: 100%"
                                    allowClear
                                    @change="selProductAttrValue(index)"
                                    v-model="item.productAttrValueId"
                                    placeholder="请选择属性值">
                                <a-select-option v-for="(childItem,idx) in item.productAttrValueList"
                                                 :value="childItem.valueId"
                                                 :label="childItem.propertyValue"
                                                 :key="idx">
                                    {{childItem.propertyValue}}
                                </a-select-option>
                            </a-select>
                        </div>
                        <div class="pull-left">
                            <a-button class="ml-15" size="small" type="primary" icon="plus" v-if="index === 0" @click="addProductAttr"></a-button>
                            <a-button class="ml-15" size="small" type="danger" icon="delete" v-if="index !== 0" @click="delProductAttr(index)"></a-button>
                        </div>
                    </div>
                </a-form-model-item>
                <a-form-model-item label="备注" prop="remark">
                    <a-input
                            class="width-percent-100"
                            allowClear
                            placeholder="请输入备注"
                            v-model="form.remark" />
                </a-form-model-item>
            </a-form-model>
        </div>
        <div slot="footer" class="text-c">
            <a-button @click="close">关闭</a-button>
            <a-button type="primary" :loading="loading" @click="sure">确定</a-button>
        </div>
    </a-modal>
</template>

<script>
    export default {
        data () {
            return {
                title: '选择产品',
                visible: false,
                form: {
                    productId: '',
                    intoCount: '',
                    intoPrice: '',
                    remark: '',
                },
                labelCol: { span: 5 },
                wrapperCol: { span: 19 },
                rules: {
                    productId: [
                        { required: true, message: '请选择产品', trigger: 'blur' },
                    ],
                    intoCount: [
                        { required: true, message: '请输入入库数量', trigger: 'blur' },
                    ],
                    intoPrice: [
                        { required: true, message: '请输入入库价格', trigger: 'blur' },
                    ],
                },
                productFn: this.$api.product.listbyproduct,
                productList: [],
                //属性操作
                productAttrFn:  this.$api.product.listbyproperty,
                productAttrArr: [
                    {
                        productAttrId: '',
                        productAttrName: '',
                        productAttrList: [],
                        productAttrValueId: undefined,
                        productAttrValueName: '',
                        productAttrValueList: [],
                    }
                ],
                loading: false,
            };
        },
        watch: {
            visible (val) {
                if (!val) {
                    this.close();
                }
            }
        },
        methods: {
            sure () {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        let isRepeatAttr = this.isRepeatArr(this.productAttrArr.map(v => v.productAttrId));
                        if (isRepeatAttr[0]) {
                            let productAttrName = this.productAttrArr[isRepeatAttr[1]]['productAttrName'];
                            this.$message.error(`属性:“${productAttrName}”选择重复，请重新选择!`);
                            return;
                        }
                        let productAttrArr = this.productAttrArr.filter(v => v.productAttrValueId);
                        let data = {...this.form,productAttrArr};
                        this.$emit('done',data);
                        this.close();
                    }
                });
            },
            show () {
                this.visible = true;
            },
            afterLoad (data) {
                this.productList = data;
            },
            selProduct (val) {
                this.form.productName = '';
                let selProductList = this.productList.filter(v => v.id === val) || [];
                selProductList.length > 0 ? this.form.productName = selProductList[0].productName || '' : '';
            },
            afterLoadAttrList (data,idx) {
                this.productAttrArr[idx].productAttrList = [];
                this.productAttrArr[idx].productAttrList = data || [];
            },
            selProductAttr (val,idx) {
                let productAttrList = this.productAttrArr[idx]['productAttrList'];
                let selProductAttrList = productAttrList.filter(v => v.id === val) || [];
                this.productAttrArr[idx]['productAttrName'] = '';
                this.productAttrArr[idx]['productAttrValueId'] = undefined;
                this.productAttrArr[idx]['productAttrValueName'] = '';
                this.productAttrArr[idx]['productAttrValueList'] = [];
                (selProductAttrList.length > 0)
                    ? (this.productAttrArr[idx]['productAttrValueList'] = (selProductAttrList[0]['propertyValueList'] || []))
                    : [];
                (selProductAttrList.length > 0)
                    ? (this.productAttrArr[idx]['productAttrName'] = (selProductAttrList[0]['propertyName'] || ''))
                    : '';
            },
            selProductAttrValue (idx) {
                let attrValueList = this.productAttrArr[idx]['productAttrValueList'];
                let attrValueId = this.productAttrArr[idx]['productAttrValueId'];
                let hasAttrValue = attrValueList.filter(v => v.valueId === attrValueId);
                this.productAttrArr[idx]['productAttrValueName'] = '';
                (hasAttrValue.length > 0)
                    ? (this.productAttrArr[idx].productAttrValueName = hasAttrValue[0]['propertyValue'])
                    : '';
            },
            addProductAttr () {
                this.productAttrArr.push({
                    productAttrId: '',
                    productAttrList: [],
                    productAttrValueId: undefined,
                    productAttrValueName: '',
                    productAttrValueList: [],
                });
            },
            isRepeatArr(arr) {
                var hash = {};
                for(var i in arr) {
                    if(hash[arr[i]]) {
                        return [true,i];
                    }
                    // 不存在该元素，则赋值为true，可以赋任意值，相应的修改if判断条件即可
                    hash[arr[i]] = true;
                }
                return [false,null];
            },
            delProductAttr (index) {
                this.productAttrArr.splice(index,1);
            },
            close () {
                this.form = {
                    productId: '',
                    intoCount: '',
                    intoPrice: '',
                    remark: '',
                };
                this.productAttrArr = [
                    {
                        productAttrId: '',
                        productAttrName: '',
                        productAttrList: [],
                        productAttrValueId: undefined,
                        productAttrValueName: '',
                        productAttrValueList: [],
                    }
                ];
                this.productList = [];
                this.loading = false;
                this.visible = false;
            },
        }
    };
</script>

<style scoped lang="scss">
    .wmsAttrTag{
        color: $main-color;
    }
</style>
